<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>早养车</title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
    <link rel="stylesheet" type="text/css" href="css/header.css"/>
    <link rel="stylesheet" type="text/css" href="css/goods.css"/>
</head>
<body>
	<!--下面这里是头部-->
	<header class="header">
		<img src="images/index1.png" class="header-logo"/>
		<img src="images/index2.png" class="header-text"/>
	</header>
	<!--上面这里是头部-->
	<!--下面这里是底部导航-->
	<nav class="bottomNav mui-bar mui-bar-tab">
		<a href="./index.html" class="mui-tab-item">
			<img src="images/icon1.png"/>
			<span>首页</span>
		</a>
		<a href="#" class="mui-tab-item customBtn">
			<img src="images/icon4.png"/>
			<span>客服</span>
		</a>
		<a href="javascript:void(0)" class="mui-tab-item">
			加入购物车
		</a>
		<a href="javascript:void(0)" class="mui-tab-item clickBuy">
			立即购买
		</a>
	</nav>
	<!--上面这里是底部导航-->
	
	<!--轮播图-->
	<div id="slider" class="mui-slider" >
		<div class="mui-slider-group mui-slider-loop">
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="#">
					<img src="./images/index10.png">
				</a>
			</div>
			<div class="mui-slider-item">
				<a href="#">
					<img src="./images/index10.png">
				</a>
			</div>
			<div class="mui-slider-item">
				<a href="#">
					<img src="./images/index10.png">
				</a>
			</div>
			<div class="mui-slider-item">
				<a href="#">
					<img src="./images/index10.png">
				</a>
			</div>
			<div class="mui-slider-item">
				<a href="#">
					<img src="./images/index10.png">
				</a>
			</div>
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="#">
					<img src="./images/index10.png">
				</a>
			</div>
		</div>
		<div class="mui-slider-indicator">
			<div class="mui-indicator mui-active"></div>
			<div class="mui-indicator"></div>
			<div class="mui-indicator"></div>
			<div class="mui-indicator"></div>
		</div>
	</div>
	
	<!--商品属性-->
	<div class="goodsinfo mui-table-view-cell">
        <div class="mui-table">
            <div class="mui-table-cell mui-col-xs-9">
                <h4 class="">嘉实多（Castrol）极护合成机油0W-40 4L装</h4>
                <h5>￥456.00<span class="mui-btn">媒体专供</span></h5>
                <p class="mui-h6 mui-ellipsis">市场价格：<span>￥688.00</span><span>快递：免运费</span></p>
            </div>
            <div class="mui-table-cell mui-col-xs-3 mui-text-right">
                <button class="mui-h5 mui-btn buynow clickBuy">立即购买</button>
            </div>
        </div>
	</div>
	
	<!--自定义图文详情-->
	<div class="desCont">
		<h4 class="goods-list-head">图文详情</h4>
		<div class="desCont-area">
			自定义商品描述内容自定义商品描述内容自定义商品描述内容自定义商品描述内容自定义商品描述内容自定义商品描述内容
			自定义商品描述内容自定义商品描述内容自定义商品描述内容自定义商品描述内容自定义商品描述内容自定义商品描述内容
			自定义商品描述内容自定义商品描述内容自定义商品描述内容自定义商品描述内容自定义商品描述内容自定义商品描述内容
		</div>
	</div>
	
	<!--猜你喜欢-->
	<ul class="goods-list">
		<h4 class="goods-list-head">猜你喜欢</h4>
		<a href="#"><li class="">
			<div class="goods-list-img">
				<img src="images/index9.png"/>
			</div>
			<div class="goods-list-price">
				￥456.0<span>（媒体专供）</span>
			</div>
			<div class="goods-list-market">
				市场价格：<span>￥688.00</span>
			</div>
			<div class="goods-list-txt">
				嘉实多（Castrol）极护合成机油0W-40 4L装
			</div>
		</li></a>
		<a href="#"><li class="">
			<div class="goods-list-img">
				<img src="images/index9.png"/>
			</div>
			<div class="goods-list-price">
				￥456.0<span>（媒体专供）</span>
			</div>
			<div class="goods-list-market">
				市场价格：<span>￥688.00</span>
			</div>
			<div class="goods-list-txt">
				嘉实多（Castrol）极护合成机油0W-40 4L装
			</div>
		</li></a>
	</ul>
	
	<!--购买弹出框-->
	<div class="showpay-mask mui-fullscreen" style="display:none;">
		<div class="showpay-area" style="bottom:-90vh">
			<div class="mui-icon mui-icon-close closepay"></div>
			<img class="showpay-img" src="images/goods1.png"/>
			<div class="showpay-txt">
				<h4>媒体专供价<span>￥456</span></h4>
				<h5>库存10000件</h5>
				<p>请选择购买数量</p>
			</div>	
		
			<div class="showpay-num">
				<div class="mui-pull-left">购买数量:</div>
				<div class="mui-numbox mui-pull-right" data-numbox-min='1'>
					<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
					<input class="mui-input-numbox" type="number" value="1"/>
					<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
				</div>
			</div>
			<div class="user-info">
				<input type="text" placeholder="姓名"/>
				<input type="number" placeholder="联系号码"/>
				<input type="text" placeholder="地址"/>
				<input type="text" placeholder="备注"/>
			</div>
			<div class="showpay-submit">
				<div class="mui-col-xs-6 mui-pull-left mui-text-center">
					加入购物车
				</div>
				<div class="mui-col-xs-6 mui-pull-right mui-text-center">
					立即付款
				</div>
			</div>
		</div>
	</div>
	
	<!--客服咨询-->
	<div class="custom mui-fullscreen">
		<div class="custom-wrap">
			<div class="mui-icon mui-icon-close closepay" id="closeCustom"></div>
			<p class="mui-text-center mui-h4" >0771-5690224</p>
			<a class="custom-btn mui-icon mui-icon-phone-filled mui-text-center" href="tel:0771-5690224">  电话咨询</a>
			<div class="custom-line"></div>
			<img class="custom-2dcode" src="images/2dcode.png"/>
			<a class="custom-btn mui-icon mui-icon-weixin mui-text-center">  微信咨询</a>
		</div>
	</div>
	
	<!--底部页脚-->
	<footer class="footer">
		早养车超值平台·南国早报独立开发运营·合作请拨热线
	</footer>
	<script type="text/javascript" src="js/index.js"></script>
	<script type="text/javascript" src="js/goods.js"></script>
</body>
</html>